<!-- 商品分类 -->
<template>
  <ContainerSlot>
    <template slot="searchModule">
      <SearchForm :labelWidth="labelWidth" :formConfig="formConfig" :formData="formData" :slotList="slotList"
        ref="ruleForm">
        <template slot="searchBtn">
          <el-button type="primary" @click.prevent="() => { page = 1, queryPageList() }">查询</el-button>
        </template>
        <template slot="resetBtn">
          <el-button @click.prevent="() => { page = 1, resetForm() }">重置</el-button>
        </template>
      </SearchForm>
    </template>
    <template slot="operationModule">
      <el-button class="optBtn" type="primary" plain @click="addData">
        <i class="el-icon-circle-plus-outline"></i>
        <span>添加</span>
      </el-button>
      <el-button class="optBtn" type="danger" plain @click="delSelectData">
        <i class="el-icon-delete"></i>
        <span>删除</span>
      </el-button>
    </template>
    <template slot="contentModule">
      <Table :propList="propList" v-loading="loading" :listData="tableData"
        @handleSelectionChange="handleSelectionChange">
        <template v-slot:avatar="{ row }">
          <el-avatar icon="el-icon-user-solid" :src="row.avatar" />
        </template>
        <template v-slot:operation="{ row }">
          <template v-if="!row['$index']">
            <el-button class="optBtn" type="primary" plain @click="editData(row)">
              <i class="el-icon-edit-outline"></i>
              <span>修改</span>
            </el-button>
            <el-button class="optBtn" type="danger" plain @click="delData(row.productTypeId)">
              <i class="el-icon-delete"></i>
              <span>删除</span>
            </el-button>
          </template>
        </template>
        <!-- visible -->
        <template v-slot:visible="{ row }">
          <!-- <span v-if="!row['$index']">{{ row.visible == '0' ? '否' : '是' }}</span> -->
          <el-switch v-if="!row['$index']" style="display: block,padding: 5px 0;" v-model="row.visible"
            @change="handleChangeVisible(row)" active-color="#13ce66" inactive-color="#ff4949" active-text="是"
            inactive-text="否" active-value="1" inactive-value="0">
          </el-switch>
        </template>
        <template v-slot:homePageDisplay="{ row }">
          <!-- <span v-if="!row['$index']">{{ row.homePageDisplay ? '是' : '否' }}</span> -->
          <el-switch v-if="!row['$index']" style="display: block,padding: 5px 0;" v-model="row.homePageDisplay"
            @change="handleChangeHomePageDisplay(row)" active-color="#13ce66" inactive-color="#ff4949" active-text="是"
            inactive-text="否">
          </el-switch>
        </template>
        <template v-slot:switch="{ row }">
          <el-switch v-if="!row['$index']" v-model="row.status" active-value="0" inactive-value="1" active-text="启用"
            inactive-text="停用" @change="editStatus(row)" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </template>
      </Table>
    </template>
    <template slot="footerModule">
      <el-pagination @size-change="handleSizeChange" :current-page="page" @current-change="handleCurrentChange" background
        layout=" prev, pager, next, jumper" :total="total">
      </el-pagination>
    </template>
    <template slot="dialog">
      <AddEdit :showDialog="showDialog" :formData="editFormData" :api="api" @closeDialog="closeDialog" />
    </template>
  </ContainerSlot>
</template>

<script>
import ContainerSlot from '@/components/Container'
import SearchForm from '@/components/Form'
import Table from '@/components/Table'
import CategoryBar from "@/components/CategoryBar";
import { propList, formConfig, categoryList } from './pageConfig'
import AddEdit from './components/addEdit.vue'
//api
import AgriculturalInfoManagement from '@/api/module/agricultural-info-management'
export default {
  name: '',
  components: { ContainerSlot, SearchForm, Table, CategoryBar, AddEdit },
  computed: {
    propList () {
      return propList
    },
    formConfig () {
      return formConfig
    },
    categoryList () {
      return categoryList
    }
  },
  data () {
    return {
      loading: false,
      api: AgriculturalInfoManagement.add,
      showDialog: false,
      page: 1,
      total: 10,
      tableData: [],
      slotList: [
        { slotName: 'searchBtn' },
        { slotName: 'resetBtn' }
      ],
      // 表单域标签的宽度
      labelWidth: '150px',
      formData: {},
      editFormData: {},
      idList: []
    }
  },
  mounted () {
    this.queryPageList()
  },
  methods: {
    handleChangeVisible (row) {
      AgriculturalInfoManagement.edit(row).then(res => {
        this.queryPageList()
      })
    },
    handleChangeHomePageDisplay (row) {
      let params = {
        productTypeId: row.productTypeId,
        display: row.homePageDisplay
      }
      AgriculturalInfoManagement.updateHomePageDisplay(params).then(res => {
        if (res.code !== 200) {
          row.homePageDisplay = !row.homePageDisplay
          this.$message.error(
            res.msg ? res.msg : '首页分类不到超过3个'
          )
        }
      })
    },
    //添加数据
    addData () {
      this.showDialog = true
      this.editFormData = {}
      this.api = AgriculturalInfoManagement.add  //添加接口
    },
    //编辑数据
    editData (data) {
      this.showDialog = true
      this.editFormData = JSON.parse(JSON.stringify(data))
      this.api = AgriculturalInfoManagement.edit //编辑接口
    },
    //关闭（添加编辑）弹窗
    closeDialog (isRef) {
      this.showDialog = false
      isRef && this.queryPageList()
    },
    //删除数据
    delData (id) {
      this.$confirm('您确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        AgriculturalInfoManagement.del(id).then(res => {
          if (res.code == 200) {
            this.queryPageList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //删除数据
    delSelectData () {
      this.$confirm('您确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        AgriculturalInfoManagement.delList(this.idList).then(res => {
          if (res.code == 200) {
            this.queryPageList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    lastPage (page, list) {
      if (page > 1 && list.length == 0) {
        this.page--
        this.queryPageList()
      }
    },

    //列表查询
    queryPageList () {
      this.loading = true
      let params = {
        page: this.page,
        size: 10,
        condition: { ...this.formData }
      }
      AgriculturalInfoManagement.queryPageByCondition(params).then(res => {
        this.loading = false
        if (res.code == 200) {
          this.lastPage(this.page, res.data.content)
          this.tableData = res.data.content
          this.total = Number(res.data.totalElements)
        } else {
          this.tableData = []
        }
        if (this.tableData.length == 0) {
          this.$message({
            type: 'success',
            message: '暂无数据!'
          });
        }
      })
    },
    //修改用户状态
    editStatus (data) {
      this.$confirm('您确定要修改该账号的启用状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        AgriculturalInfoManagement.updateStatus({
          'id': data.userId,
          'status': data.status
        }).then(res => {
          if (res.code == 200) {
            this.queryPageList()
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
          } else {
            data.status = data.status == '1' ? '0' : '1'
            this.$message({
              type: 'info',
              message: res.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    handleSelectionChange (data) {
      this.idList = []
      data.forEach(item => {
        item.productTypeId && this.idList.push(item.productTypeId)
      });
    },
    handleCurrentChange (e) {
      this.page = e
      this.queryPageList()
    },
    handleSizeChange (e) {
      console.log(e)
    },
    //查询
    searchForm () {
      this.$refs.ruleForm.searchForm(valid => {
        if (valid) {
          console.log('提交', this.formData);
        } else {
          console.log('请填写表单的必要信息');
        }
      });
    },
    resetForm () {
      console.log('重置')
      this.$refs.ruleForm.resetForm();
      this.queryPageList()
    }
  }
}
</script>

<style lang="scss" scoped></style>

